.controls {
  position: absolute;
  box-sizing: border-box;
  width: auto;
  height: auto;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  --bg-color: color-mix(in srgb, var(--color-4), rgb(255 255 255 / 0.3));
  --border-width: 5px;
  border-left: 1px solid var(--bg-color);
  border-top: 1px solid var(--bg-color);
  box-shadow: 0 0 5px var(--color-10);
}

.controls > * {
  pointer-events: all;
  user-select: none;
}

.right-resize {
  position: absolute;
  inset: 0 0 auto auto;
  cursor: ew-resize;
  width: var(--border-width);
  height: 100%;
  background: var(--bg-color);
}

.bottom-resize {
  position: absolute;
  inset: auto 0 0 auto;
  cursor: ns-resize;
  width: 100%;
  height: var(--border-width);
  background: var(--bg-color);
}

.corner-resize {
  position: absolute;
  inset: auto 0 0 auto;
  cursor: nwse-resize;
  width: var(--border-width);
  height: var(--border-width);
  background: var(--bg-color);
}

.button-list {
  --bg-color: color-mix(in srgb, var(--color-4), rgb(255 255 255 / 0.3));
  user-select: none;
  white-space: nowrap;
  line-height: normal;
  position: absolute;
  background: var(--bg-color);
  padding: 2px 5px;
  z-index: 1000;
}
.button {
  display: inline-block;
  cursor: pointer;
  color: var(--color-12);
  margin: 2px;
}
.button :global(.el-icon:hover) {
  color: currentColor;
}

.guide {
  pointer-events: none;
  visibility: hidden;
  width: 0;
  height: 0;
  position: fixed;
}
.guide-horizontal {
  border-top: 1px dashed #f00;
  width: auto;
  transform: translateX(0.5px);
  left: 0;
  right: 0;
}
.guide-vertical {
  border-left: 1px dashed #f00;
  height: auto;
  transform: translateY(0.5px);
  top: 0;
  bottom: 0;
}
